import React from "react";
import BaseComponent from "../../../redare/components/BaseComponent";
import {Spin, Typography, Descriptions, Alert, Timeline} from "antd";
import Style from "./Logistics.module.scss";
import {moduleStyleAnalysis} from "../../../common/Utils";
import {request} from "../../../redare/utils/Request";

export default class Logistics extends BaseComponent {

  static defaultProps = {
    expressNumber: ''
  };

  status = ["查询异常", "暂无记录", "在途中", "派送中", "已签收", "用户拒签", "疑难件", "无效单", "超时单", "签收失败","退回"];

  state = {
    pageLoading: true,
    logisticsInfo: {},
    logisticsPath: [],
    logisticsErrorMsg: ''
  };

  componentDidMount() {
    console.log("this.props.expressNumber=" + this.props.expressNumber)
    if (this.props.expressNumber) {
      this._loadLogisticsInfo(this.props.expressNumber);
    }
  }


  render() {

    return (
      <>
        {this._getRender()}
      </>
    );
  }

  _getRender(){
    let {logisticsInfo,logisticsErrorMsg,pageLoading} = this.state;

    let node;
    if( pageLoading ){
      node = <div style={{
        width: '100%',
        display: 'flex',
        justifyContent: "center",
        marginTop: "20%"
      }}><Spin  tip="加载中..." /></div>;
    }else {
      if( logisticsErrorMsg ){
        node = <Alert message={logisticsErrorMsg} type="error" showIcon/>;
      }else {
        node = <div className={moduleStyleAnalysis(Style, "logistics")+" timeline-center-time-left"}>
          <div style={{marginBottom: '10px'}}>
            <Descriptions title="" bordered >
              <Descriptions.Item label="快递类型">{logisticsInfo.kuaidiname}</Descriptions.Item>
              <Descriptions.Item label="快递单号"><Typography.Paragraph className={'marginBottom0'} copyable>{this.props.expressNumber}</Typography.Paragraph></Descriptions.Item>
              <Descriptions.Item label="状态"><span style={{color: "#1890ff"}}>{this.status[logisticsInfo.status]}</span></Descriptions.Item>
            </Descriptions>
          </div>
          <div className={moduleStyleAnalysis(Style, "logistics-head")}>
            <div className={moduleStyleAnalysis(Style, "logistics-title-left")}>时间</div>
            <div className={moduleStyleAnalysis(Style, "logistics-title-right")}>地点和跟踪进度</div>
          </div>
          <div className={moduleStyleAnalysis(Style, "logistics-body")}>
            <div className={moduleStyleAnalysis(Style, "logistics-body-content")}>
              <Timeline mode={"left"}>
                {
                  this.state.logisticsPath.map((item,index) => {
                    let color = index > 0 ? "gray" : "#1890ff";
                    let fontStyle = index > 0 ? {} : {color: "#1890ff"};


                    return <Timeline.Item
                      key={item.time}
                      label={<span style={fontStyle}>{item.time}</span>}
                      color={color}
                    >{<span style={fontStyle}>{item.content}</span>}</Timeline.Item>
                  })
                }
              </Timeline>
            </div>

          </div>
        </div>;
      }
    }

    return node;
  }

  // 加载物流信息
  _loadLogisticsInfo(expressNumber) {
    if (!expressNumber) {
      return;
    }


    let url = "https://api.tianapi.com/txapi/kuaidi/index?key=06b832e1eab48cda5b287c624e7c40fe&number=" + expressNumber;
    request({
      url: url,
      method: "GET",
      mode: 'cors',
    }).then((s_r) => {
      if (s_r) {

        let resultInfo = JSON.parse(s_r);
        if (resultInfo.code == '200') {
          let info = resultInfo.newslist[0];
          let newInfo = {...info};
          delete newInfo.list;

          setTimeout(()=>{
            this.setState({
              logisticsInfo: newInfo,
              logisticsPath: info.list,
              pageLoading: false
            });
          }, 300);
        } else {
          this.setState({logisticsErrorMsg: resultInfo.msg, pageLoading: false});
        }

      }
    }).catch((f_r)=>{
      this.setState({logisticsErrorMsg: f_r.toString, pageLoading: false});
    });


  }

}